<template>
    <div class="recommend">
        <a-page-header title="应用推荐" subtitle="开发者的其他项目" :show-back="showBack" @back="$router.back()">
        </a-page-header>
        <div class="recommend-wrapper">
            <a-list :bordered="false">
                <template #header>
                    开源项目
                </template>
                <a-list-item action-layout="vertical">
                    <template #actions>
                        <a-link target="_blank" @click="openLink('http://es-client.esion.xyz')">官网</a-link>
                        <a-link target="_blank"
                            @click="openLink('https://gitee.com/qiaoshengda/es-client')">Gitee仓库</a-link>
                        <a-link target="_blank"
                            @click="openLink('https://github.com/q2316367743/es-client')">GitHub仓库</a-link>
                    </template>
                    <template #extra>
                        <a-link @click="toApp('es-client')" style="margin-top: 40px;">立即使用</a-link>
                    </template>
                    <a-list-item-meta description="es-client是一款elasticsearch客户端，界面美观，可以实现链接管理，索引管理，基础搜索，高级搜索等功能">
                        <template #title>
                            <div style="display: flex;">
                                <h3>es-client</h3>
                                <a-image style="margin-left: 14px;"
                                    src='https://gitee.com/qiaoshengda/es-client/badge/star.svg?theme=white'
                                    alt='gitee star' />
                                <a-image style="margin-left: 7px;"
                                    src="https://img.shields.io/github/stars/q2316367743/es-client?style=social"
                                    alt="github star" />
                            </div>
                        </template>
                        <template #avatar>
                            <a-avatar shape="square">
                                <img alt="es-client" src="/es-client.png" />
                            </a-avatar>
                        </template>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
            <a-list :bordered="false">
                <template #header>
                    付费项目
                </template>
                <a-list-item action-layout="vertical">
                    <template #actions>
                        <a-link target="_blank"
                            @click="openLink('https://www.yuque.com/baozhiyige-tewwf/gfbte7')">官网</a-link>
                    </template>
                    <template #extra>
                        <a-link @click="toApp('阅读')" style="margin-top: 40px;">立即使用</a-link>
                    </template>
                    <a-list-item-meta description="阅读小说、看视频、看资源、看订阅，一网打尽。">
                        <template #title>
                            <div style="display: flex;">
                                <h3>阅读</h3>
                            </div>
                        </template>
                        <template #avatar>
                            <a-avatar shape="square">
                                <img alt="阅读" src="/read.png" />
                            </a-avatar>
                        </template>
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: 'setting-recommend',
    props: {
        showBack: {
            type: Boolean,
            required: false,
            default: true
        }
    },
    data: () => ({
    }),
    methods: {
        openLink(url: string) {
            utools.shellOpenExternal(url);
        },
        toApp(name: string) {
            utools.redirect(name, '');
        }
    }
});
</script>
<style lang="less">
.recommend {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .recommend-wrapper {
        position: absolute;
        top: 62px;
        left: 14px;
        right: 14px;
        bottom: 14px;

    }

}
</style>